
            <section class="row">
                <div class="col-12">
                    <div>
                        <h1>Custom Form Elements</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Forms</li>
                            <li class="active">Custom Form Elements</li>
                        </ol>
                    </div>
                </div>
            </section>
            
            <div class="ajax-container">
                <section class="row">
                    <div class="col-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Custom Form Elements with Validations</h3>
                            </div>
                            <div class="panel-body form-container">
                                <form id="basic-validation" method="post" action="<?= base_url() ?>forms/validate" class="form-bordered form-horizontal form-validate">
                                    <fieldset>
                                        <legend>Country and State</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="country" class="control-label col-3">
                                                    Country *
                                                    <br><small>(Select Country)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="country" id="country" class="form-control">
                                                                <option value="" selected="selected"> - Select Country - </option>
                                                                <?php foreach($countries as $country) : ?>
                                                                <option value="<?= $country['code'] ?>"><?= $country['name'] ?></option>
                                                                <?php endforeach;   ?>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="state" class="control-label col-3">
                                                    State *
                                                    <br><small>(Select State)</small>
                                                </label>
                                                <div class="control-group col-9">
                                                    <div class="input-size">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <select name="state" id="state" class="form-control">
                                                                <option value="" selected="selected"> - Select State - </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    
<!--                                    <fieldset>
                                        <legend>Geolocation</legend>
                                        <ul>
                                            <li class="form-group row">
                                                <label for="geolocation_map" class="control-label col-3">
                                                    Plot Geolocation *
                                                    <br><small>(plot geolocation)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div id="geolocation_map" style="width:100%; height:300px;"></div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation" class="control-label col-3">
                                                    Geolocation *
                                                    <br><small>(geolocation)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                            <input type="text" name="geolocation" id="geolocation" class="form-control" placeholder="Geolocation">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation_longitude" class="control-label col-3">
                                                    Geolocation Longitude *
                                                    <br><small>(longitude)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                            <input type="text" name="geolocation-longitude" id="geolocation_longitude" class="form-control" placeholder="120.61758366806225">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="form-group row">
                                                <label for="geolocation_latitude" class="control-label col-3">
                                                    Geolocation Latitude *
                                                    <br><small>(latitude)</small>
                                                </label>
                                                <div class="control-group input-center col-9">
                                                    <div class="input-size col-12">
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                                            <input type="text" name="geolocation-latitude" id="geolocation_latitude" class="form-control" placeholder="16.413640135538014">
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>-->
<!--                                    <script>
                                        $(function() {
                                            initialize_map('geolocation', '120.61758366806225', '16.413640135538014');
                                        });
                                    </script>-->
                                    <div class="submit-group col-12 align-right">
                                        <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                        <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>

            </div>

            <!-- page-script -->
            <script src="<?= base_url() ?>js/scripts/form-custom.js"></script>